<template>
  <div style="display: flex;justify-content: center;align-items: center;">
    <t-inner-loading :showing="showLoading" label="加载中..." label-style="font-size: 0.9em"
      style="z-index: 99;color:#000000" />
    <div class="div-flex-center">
      <div v-if="activityState == 0 || activityState == 2">
        <ActivityContent :imgSrc="tempImgSrc" :title="tempTitle" :msg="tempMessage"></ActivityContent>
      </div>
      <div class="image-background" v-else-if="activityState == 1">
        <div class="title-h1">{{ titleH1 }}</div>
        <div class="title-h2">{{ titleH2 }}</div>
        <div class="div-relative">
          <div class="textContent_bg">
            <div class="textContent_border">
              <!-- 修改后的 t-input 组件 -->
              <t-input ref="inputTelNum" v-model="telNumber" label="" borderType="borderless" style="max-width: 180px;"
                placeholder="请输入手机号" :maxLength='11' @input="handleInput" :class="{ 'red-cursor': isInputting }"
                :readonly="hasAuth" />
              <i v-show="telNumber && !hasAuth" class="fas dx-icon icon-t-close-circle-fill div-close-png"
                @click="handleClear"></i>
            </div>
          </div>
          <div @click="handleReceive" class="receive_div_bg">&nbsp;</div>
          <img :src="redPacket_body_receive_img" class="redPacket-body-receive">
          <img :src="redPacket_body_img" class="redPacket-body">
        </div>
        <div class="div-flex-center">
          <div class="activity-rules" @click="showTooltipsClick">活动规则</div>
        </div>
        <div class="activity-time">活动时间 {{ beginTime }}~{{ endTime }}</div>
      </div>
      <div class="image-background" v-else-if="activityState == 3">
        <ActivitySuccessResult :PrizeTotal="resultData.PrizeTotal" :PrizeList="resultData.PrizeList" :QRCODE="QRCODE"
          :QRCODEText="QRCODEText" :Telephone="telephone"></ActivitySuccessResult>
      </div>
      <t-dialog v-model:show="notWinning">
        <t-card class="notWinning">
          <t-card-section class="q-pt-none div-flex-center" style="flex-direction: column;padding-bottom:0px;">
            <div class="notWinning_title">非常遗憾</div>
            <div class="notWinning_subtitle">本次未中奖，下次再试吧</div>
            <img :src="redPacket_nowinging_img" class="notWinning_img" />
          </t-card-section>
          <t-card-section align="center">
            <div class="notWinningBtn div-flex-center" @click="notWinning = false">我知道了</div>
          </t-card-section>
        </t-card>
      </t-dialog>
      <t-dialog v-model:show="showMessagePanel" seamless>
        <t-card class="message_title_posi">
          <div class="message_title">{{ alertMessage }}</div>
        </t-card>
      </t-dialog>
      <t-dialog v-model:show="showTooltipsPanel" position="bottom">
        <t-card class="t-drawer-bottom div-tooltips-radius">
          <t-card-section class="t-drawer-title div-tooltips-radius div-tooltips-bg">
            <div class="text-h6 div-tooltips-title">活动规则</div>
          </t-card-section>
          <t-card-section style="max-height: 375px;overflow: auto;color: #8B4F45;padding-top: 0px;">
            <div class="div-tooltips-content" v-html="activityRules"></div>
          </t-card-section>
          <t-card-section align="center">
            <div class="notWinningBtn div-flex-center div-tooltips-btn" @click="showTooltipsPanel = false">我知道了</div>
          </t-card-section>
        </t-card>
      </t-dialog>
    </div>
  </div>
</template>
<script setup>
// import { getRedPacketInfo, getRedPacketValue } from '../../page-modules/redPacketV3/redPacketV3'
import ActivityContent from '../../components/redPacketV3/ActivityContent.vue'
import ActivitySuccessResult from '../../components/redPacketV3/ActivitySuccessResult.vue'
import { ref, onMounted, reactive, toRefs, watch, computed } from 'vue';
//主入口
onMounted(() => {
  //加载页面数据
  if (ActivityId) {
    handlePageLoad(async ()=>{
      let hasUserInfo = await getUserInfo();//有身份，再去获取登录信息
    if (hasUserInfo) {
      telNumber.value = hasUserInfo.Mobile
    }
    })
  } else {
    // Funcs.Notify("警告", "活动ID为空！", "error");
    showLoading.value = false
  }
});
const ActivityId = TFF.common.api.Url.getUrlQuery('Aid') || '1111111';//活动ID

const IsPreview = TFF.common.api.Url.getUrlQuery('IsPreview') || false;//是否预览
const redPacket_body_img = ref('https://resource.teld.cn/teldimage/107/b7597a393b6045b3a07cd2d8efd774dd.png')
const redPacket_body_receive_img = ref('https://resource.teld.cn/teldimage/107/9a25662cb7b04a74b41a2791186d10f8.png')
const redPacket_nowinging_img = ref('https://resource.teld.cn/teldimage/107/9f1b88c167a74aec8366a75663d63925.png')//未中奖图片
//变量
let QRCODE = ref('')//二维码//二维码
let QRCODEText = ref('')//二维码提示文字
let telNumber = ref('')
let activityRules = ref('')//活动规则
let showLoading = ref(true)//默认显示加载中
const NoStartImg = "https://resource.teld.cn/teldimage/107/27cf7781c5784c8da7ef30702daa37e8.png"//活动未开始
const ActivityClose = "https://resource.teld.cn/teldimage/107/54d61f26571c451788bdc59576974dc6.png"//活动已结束
let isInputting = ref(false);
let notWinning = ref(false)//未中奖弹框
let showMessagePanel = ref(false)//弹框提示
let showTooltipsPanel = ref(false)//
let alertMessage = ref('')
let resultData = ref({})
let titleH1 = ref('')
let titleH2 = ref('')
let beginTime = ref('')
let endTime = ref('')
let activityState = ref(-1)//0未开始，1，进行中 2 已结束 3 领取成功
let tempImgSrc = ref(NoStartImg)
let tempTitle = ref('活动未开始')
let tempMessage = ref('开始时间 ' + beginTime.value)
const SID_INIT = "ProSrv-GetRedPacketActivityForApp"//获取活动信息
const SID_RECEIVE = "ProSrv-ReceiveRedPacketForApp"//领取红包
let shareTitle = ref('')//分享标题
let shareDescription = ref('')//分享描述
let shareIconImage = ref('')//分享图片
let shareUrl = window.location.href//分享链接 
let telephone = ref('')
let inputTelNum = ref(null)
let hasAuth = ref(false)
//函数
function handleClear() {
  telNumber.value = ''
  inputTelNum.value.focus()
}
function getUserInfo() {
  return new Promise((resolve, reject) => {
    let hasUserInfo = TFF.common.storage.Cookie.read('teldc') === '0';//有身份，再去获取登录信息
    if (hasUserInfo) {
      hasAuth = true
      TFF.common.ajax.getDataAsync({
        url: TFF.common.ajax.getServiceUrl("WRP-Runtime-GetUserInfo"),
        type: 'post',
        data: {},
      }).then((result) => {
        if (result.state == 1 && result.data) {
          resolve(result.data)
        }
        resolve(false)
      })
    } else {
      resolve(false)
    }
  })
}
//分享事件
const handleShare = () => {
  try {
    // title为分享的title
    // desc为分享的描述
    // image为分享的图片网络地址，调用分享时，App会预加载该网络图片
    // url为分享H5的url
    // mpType：可缺省，默认指正式版。0-正式版；1-开发版；2-体验版
    // mpID：小程序原始ID
    // wxsp：小程序Path
    // 注：如果title，desc，url都为空，且image不为空，认为是分享单张图片
    // channel是可选参数，代表限定的分享渠道，分享渠道以逗号分隔
    // channel：wxp-微信好友；wxf-微信朋友圈；sina-新浪微博；qqp-QQ好友；qqz-QQ空间；sys-系统分享
    let obj = {
      title: shareTitle.value,
      desc: shareDescription.value,
      image: shareIconImage.value,
      url: shareUrl,
      mpType: "",
      mpID: "",
      wxsp: "",
      showBottom: "",
    }
    let clientType = TFF.common.ctx.getClientType();
    TFF.jsdk.ready({ url: '', sgUrlPrefix: '' }, () => {
      window.envApi.getShareContent(() => {
        return obj
      })
      // if (TFF.common.ctx.CLIENT_TYPE.WX_SP == clientType || TFF.common.ctx.CLIENT_TYPE.WX == clientType) {//微信，微信小程序
      // } else if (TFF.common.ctx.CLIENT_TYPE.TeldApp == clientType) {//teld-app
      // }
    });
  } catch (error) {
    console.log(error);
  }

}
const handlePageLoad = (fn) => {
  let result = {
    "RuleDetail": null,
    "ActivityStatus": "20",
    "ActivityID": "1111111",
    "Style": {"topText":"快来领取你的奖励","mainTitle":"充电有礼，红包不停","subTitle":"充电有奖励","activityRules":"1、领取卡券；2、充电省钱。","qrCode":"","qrCodeText":"关注T微信公众号","supportShare":false,"shareTitle":"","shareDescription":"","shareIconType":"","shareIconImage":"","startDate":"2025-07-17 00:00:00","endDate":"2027-12-01 00:00:00"}
  }
    let data = result?.Style
    let ActivityStatus = result.ActivityStatus
    document.title = data?.topText//标题
    window.envApi?.setTitle({ title: data?.topText });
    beginTime.value = TFF.common.api.Format.formatDateTime(new Date(data?.startDate), 'yyyy.MM.dd')
    endTime.value = TFF.common.api.Format.formatDateTime(new Date(data?.endDate), 'yyyy.MM.dd')
    if (ActivityStatus == "20") {
      activityState.value = "1"
      titleH1.value = data.mainTitle
      titleH2.value = data.subTitle
      activityRules.value = data.activityRules.replace(/\n/g, '<br/>') || "暂无活动规则"//活动规则，一块返回
      QRCODE.value = data.qrCode
      QRCODEText.value = data.qrCodeText
      shareTitle.value = data.shareTitle
      shareDescription.value = data.shareDescription
      shareIconImage.value = data.shareIconImage
      //注册分享事件
      handleShare()

    } else if (ActivityStatus === "10" || ActivityStatus === "0") {
      //活动未开始
      activityState.value = "0"
      tempImgSrc.value = NoStartImg
      tempTitle.value = '活动未开始'
      tempMessage.value = '开始时间 ' + beginTime.value
    } else if (ActivityStatus === "99") {
      //活动已结束
      activityState.value = "2"
      tempImgSrc.value = ActivityClose
      tempTitle.value = '活动已结束'
      tempMessage.value = '感谢参与，更多惊喜即将来袭！'
    } else {
      //活动未找到
      activityState.value = "0"
      tempImgSrc.value = NoStartImg
      tempTitle.value = '活动未开始'
      tempMessage.value = ''
    }
    if(fn){
      fn()
    }
    showLoading.value = false
}
const handleInput = (e) => {
  // 只允许输入数字
  const value = e.target.value.replace(/\D/g, '');
  telNumber.value = value;
  isInputting.value = true;
};
let timer = null
//领取红包入口
const handleReceive = () => {
  //未输入手机号
  if (telNumber.value === '') {
    alertMessage.value = "请输入手机号后领取"
    showMessagePanel.value = true
    hideAlertPanel()
    return
  } else if (!validatePhoneNumber(telNumber.value)) {
    alertMessage.value = "请输入正确的手机号"
    showMessagePanel.value = true
    hideAlertPanel()
    return
  }
  //领取红包
  getRedPacetValue()
}
function maskPhoneNumber(e) {
  return e.substring(0, 3) + "****" + e.substring(7)
}
//领取红包
const getRedPacetValue = () => {
  showLoading.value = true
  // getRedPacketValue(SID_RECEIVE, ActivityId, telNumber.value).then(data => {
  //   showLoading.value = false
  //   // data={
  //   //   state:1,
  //   //   data:{
  //   //     PrizeTotal:100,
  //   //     PrizeList:[{Title:"感谢参与"}]
  //   //   }
  //   // }
  //   if (data.state == 0) {
  //     //一些错误信息，提示出来
  //     let errcode = data.errcode
  //     let errmsg = "网络开小差，请稍后重试~"
  //     if(errcode.indexOf("BIZ") != -1){
  //       errmsg = data.errmsg
  //     }
  //     alertMessage.value = errmsg
  //     showMessagePanel.value = true
  //     hideAlertPanel(2000)
  //   } else if (data.state == 1) {
  //     let result = data.data
  //     if (result) {
  //       let tempValue = result.PrizeList[0]["Title"]
  //       if (tempValue == "感谢参与") {
  //         notWinning.value = true
  //       } else {
  //         //领取成功了
  //         resultData.value = result
  //         activityState.value = "3"
  //       }

  //     } else {
  //       //说明未领取成功--未中奖
  //       notWinning.value = true
  //     }
  //   }
  //   telephone.value = maskPhoneNumber(telNumber.value)
  // })


}
function showTooltipsClick() {
  showLoading.value = false
  showTooltipsPanel.value = true;
}
//3000毫秒后关闭弹框
function hideAlertPanel(time) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    showMessagePanel.value = false
  }, time || 1500)
}
//验证手机号是否合法
const validatePhoneNumber = (phoneNumber) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phoneNumber);
};
</script>
<style>
#app{
  margin: 0 auto;
  margin-left:calc(50vw - 207px);
}
#app{
  max-width: 414px;
}

.tr-input-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container .q-field__native {
  /* font-family: 'HONORSansCN-Regular' !important; */
  text-align: center;
  font-size: calc(414px* 14 / 375);
  font-weight: 500;
  color: #000;
}
</style>
<style scoped>
.div-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
}

.activity-rules {
  /* font-family: 'HONORSansCN-Regular' !important; */
  color: #73120C;
  border-radius: calc(414px* 50 / 375);
  background-color: #FEE2AC;
  width: calc(414px* 88 / 375);
  height: calc(414px* 36 / 375);
  ;
  font-size: calc(414px* 14 / 375);
  font-weight: 500;
  line-height: calc(414px* 36 / 375);
  margin-top: calc(414px* 30 / 375);
}

.activity-time {
  /* font-family: 'HONORSansCN-Regular' !important; */
  color: #B0785C;
  font-size: calc(414px* 12 / 375);
  font-weight: 400;
  line-height: calc(414px* 18 / 375);
  margin-top: calc(414px* 15 / 375);
}

/* 定义光标为红色的样式 */
.red-cursor {
  caret-color: #FF293E;
}

.div-flex {
  display: flex;
}

.div-relative {
  position: relative;
}

.image-background {
  width: 414px;
  height: auto;
  min-height: 100vh;
  background-image: url('https://resource.teld.cn/teldimage/107/29e084296a9e4a2093cd81fb380a7c14.png');
  background-size: cover;
  background-position: center;
  text-align: center;
}

.title-h1 {
  margin-top: calc(414px* 30 / 375);
  font-size: calc(414px* 30 / 375);
  line-height: calc(414px* 36 / 375);
  font-weight: 400;
  color: #FFFFFF;
  font-family: 'ZiHunBianTaoTi-2' !important;
}

.title-h2 {
  margin-top: calc(414px* 12 / 375);
  font-size: calc(414px* 18 / 375);
  font-weight: 400;
  line-height: calc(414px* 25 / 375);
  color: #FFFFFF;
  /* font-family: 'HONORSansCN-Regular' !important; */
}

.redPacket-body {
  margin-top: calc(414px* 30 / 375);
  width: calc(414px* 323 / 375);
  height: auto;
}

.redPacket-body-receive {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: calc(414px* 47 / 375);
  width: calc(414px* 140 / 375);
  height: calc(414px* 140 / 375);
}

.textContent_bg {
  position: absolute;
  top: calc(414px* 175 / 375);
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ff616d;
  width: calc(414px* 251 / 375 + 8px);
  height: calc(414px* 56 / 375 + 8px);
  border: 4px;
  border-radius: calc(414px* 18 / 375);
  display: flex;
  justify-content: center;
  justify-content: center;
  align-items: center;
}

.textContent_border {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: calc(414px* 251 / 375);
  height: calc(414px* 56 / 375);
  border-radius: calc(414px* 14 / 375);
  border: 4px solid #FFFFFF33
}

.notWinning {
  background: linear-gradient(180deg, #FFD9DF 0%, #FFFBEB 100%);
  border-radius: 14px !important;
  width: calc(414px* 260 / 375);
  border: solid 1px white;
}

.notWinning_title {
  margin-top: calc(414px* 16 / 375);
  font-size: calc(414px* 20 / 375);
  font-weight: 600;
  line-height: calc(414px* 28 / 375);
  color: #FC474A;
  /* font-family: 'HONORSansCN-Regular' !important; */
}

.notWinning_subtitle {
  margin-top: calc(414px* 6 / 375);
  font-size: calc(414px* 14 / 375);
  font-weight: 400;
  line-height: calc(414px* 20 / 375);
  /* font-family: 'HONORSansCN-Regular' !important; */
}

.notWinning_img {
  width: calc(414px* 170 / 375);
  height: calc(414px* 170 / 375);
}

.notWinningBtn {
  /* font-family: 'HONORSansCN-Regular' !important; */
  width: calc(414px* 228 / 375);
  height: calc(414px* 52 / 375);
  background: linear-gradient(91.32deg, #FF675F 0%, #FF2E3D 100%);
  border-radius: 12px;
  font-size: calc(414px* 14 / 375);
  font-weight: 500;
  color: white
}

.receive_div_bg {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: calc(414px* 62 / 375);
  width: calc(414px* 110 / 375);
  height: calc(414px* 110 / 375);
  border-radius: 200px;
  z-index: 99;
}

.message_title {
  /* font-family: 'HONORSansCN-Regular' !important; */
  padding: 14px 20px;
  background: black;
  border-radius: 100px;
  font-size: calc(414px* 14 / 375);
  font-weight: 400;
  color: white
}

.message_title_posi {
  border-radius: 100px !important;
  background: black;
  margin-top: calc(414px* 60 / 375);
}

.div-tooltips-btn {
  width: calc(414px* 343 / 375);
  height: calc(414px* 52 / 375);
}

.div-tooltips-title {
  /* font-family: 'HONORSansCN-Regular' !important; */
  font-size: calc(414px* 18 / 375);
  font-weight: 600;
  color: #8B4F45;
}

.div-close-png {
  position: absolute;
  color: #00000066;
  right: calc(414px* 20.12 / 375);
}

.div-tooltips-content {
  /* font-family: 'HONORSansCN-Regular' !important; */
  font-size: calc(414px* 14 / 375);
  font-weight: 400;
  color: #8B4F45;
}

.div-tooltips-radius {
  border-top-right-radius: 20px !important;
  border-top-left-radius: 20px !important;
}

.div-tooltips-bg {
  background: linear-gradient(180deg, #FFD9DF 0%, #FFFFFF 100%);
}
</style>